<template>
  <div ref="echarts" class="echarts"></div>
</template>

<script>
// 按需引入
import * as echarts from "echarts/core";
import { TitleComponent, LegendComponent } from "echarts/components";
import { RadarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);

export default {
  mounted() {
    // echarts.init(this.$refs.echarts);
    this.getEcharts();
  },
  data() {
    return {
      option: {
        title: {
          text: "人力资源基础绩效表",
        },
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "考勤", max: 25000 },
            { name: "工资", max: 25000 },
            { name: "社保", max: 25000 },
            { name: "工作效率", max: 25000 },
            { name: "知识分享", max: 25000 },
            { name: "代码行数", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [20000, 20000, 20000, 20000, 20000, 20000],
                name: "Allocated Budget",
                lineStyle:{
                    color:"orange",
                }
              },
              {
                value: [10000, 10000, 10000, 10000, 10000, 10000],
                name: "Actual Spending",
                lineStyle:{
                    color:"red",
                }
              },
              {
                value: [1000, 2000, 25000, 1500, 24000, 25000],
                name: "Actual Spending",
                lineStyle:{
                    color:"cyan"
                }
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    getEcharts() {
      const chart = echarts.init(this.$refs.echarts);
      chart.setOption(this.option);
    },
  },
};
</script>

<style>
.echarts {
  height: 300px;
}
</style>